<template>
  <div class="wx-reply-editor-swtich">
    <!--  Deprecated-->
<!--    msgGuideQw: {-->
<!--    msgSwitch: false,-->
<!--    msg: this.msgOver,-->
<!--    imageSwitch: false,-->
<!--    image: ''-->
<!--    },-->
    <div class="ml-30 mt-30 wx-reply-editor-title">
      <div class="d-aic title-content-wrap">
        <div class="title-content">{{ title }}</div>
        <div class="title-desc">*{{ tips }}</div>
      </div>
      <div class="d-jcs-aic title-link-btn">
        <div class="quick-btn-wrap d-aic">
          <div class="quick-btn" v-for="(item,index) in btnList " :key="index">
            <template>
              <a-popover v-if="item.type==='array'" placement="bottom">
                <template slot="content">
                  <p v-for="(itemName,itemIndex) in item.names" :key="itemIndex" @click="insertSpan(itemName)">{{
                    itemName }}</p>
                </template>
                <a-icon class="quick-icon" :type="item.icon"/>
                <span class="quick-name">{{ item.name }}</span>
              </a-popover>
              <div v-else @click="insertSpan(item.name)">
                <a-icon class="quick-icon" :type="item.icon"/>
                <span class="quick-name">{{ item.name }}</span></div>
            </template>
          </div>
        </div>
        <div class="link-wrap">
          <a-button type="link" @click="showDemo">示例文案</a-button>
        </div>
      </div>
    </div>
    <div>
      <div>
        <a-switch
          class="ml-20"
          v-model="value.msgSwitch">
        </a-switch>
        <span :style="{marginLeft:'8px',color:value.msgSwitch?'#46A0FC':''}">启用</span></div>
      <wx-reply-editor ref="replyEditor" class="ml-30" :value="value.msg" @input="changeValue"/>
    </div>
    <div>
      <div>
        <a-switch
          class="ml-20"
          v-model="value.posterSwitch">
        </a-switch>
        <span :style="{marginLeft:'8px',color:value.msgSwitch?'#46A0FC':''}">启用</span></div>
      <div class="upload-btn-img d-jcc-aic">
        <a-icon type="plus" class="upload-btn-icon"/>
      </div>
    </div>
  </div>
</template>

<script>
  import WxReplyEditor from './wx-reply-editor'

  export default {
    name: 'WxReplyEditorSwtich',
    components: { WxReplyEditor },
    props: {
      value: {
        type: Object,
        default: () => {
          return {}
        }
      },
      title: {
        type: String,
        default: null
      },
      tips: {
        type: String,
        default: null
      },
      menus: {
        type: Array,
        default: () => {
          return ['user', 'team', 'pushpin', 'message', 'contacts', 'link']
        }
      }
    },
    data () {
      return {
        linkBtnList: [
          {
            icon: 'user',
            name: '昵称',
            type: ['keyword', 'guide', 'ladder', 'end', 'pushHelp', 'pushJoin']
          },
          {
            icon: 'team',
            name: '好友',
            type: ['keyword', 'ladder', 'pushHelp', 'pushJoin']
          },
          {
            icon: 'pushpin',
            name: '奖品剩余数',
            type: 'array',
            // type: ['keyword', 'ladder', 'pushJoin']
            names: ['一级奖品剩余数量', '二级奖品剩余数量', '三级奖品剩余数量']
          },
          {
            icon: 'message',
            name: '邀请人数',
            type: ['ladder', 'pushJoin']
          },
          {
            icon: 'contacts',
            name: '阶梯助力人数',
            type: 'array',
            names: ['一级奖品剩余数量', '二级奖品剩余数量', '三级奖品剩余数量']
            // type: ['keyword', 'ladder', 'pushJoin']
          },
          {
            icon: 'link',
            name: '链接',
            type: ['keyword', 'guide', 'ladder', 'end', 'pushHelp', 'pushJoin']
          }
        ]
      }
    },
    computed: {
      btnList () {
        const list = []
        if (this.menus.length) {
          this.menus.forEach(item => {
            this.linkBtnList.forEach(btnItem => {
              if (btnItem.icon === item) {
                list.push(btnItem)
              }
            })
          })
        }
        return list
      }
    },
    methods: {
      insertSpan (name) {
        if (name === '链接') {
          this.$refs.replyEditor.mceInsertLink()
        } else {
          const value = `<span class="mceNonEditable">` + name + `</span>`
          this.$refs.replyEditor.insertContent(value)
        }
      },
      changeValue (value) {
        this.$emit('input', value)
      },
      showDemo () {
        this.$emit('showDemo')
      }
    }
  }
</script>

<style scoped lang="less">

  .wx-reply-editor-title {
    padding: 11px 14px;
    width: 630px;
    height: 85px;
    border: 1px solid #D9D9D9;
    border-bottom: none;

    .title-content-wrap {
      height: 20px;
    }

    .title-content {
      font-size: 14px;
      color: #595959;
    }

    .title-desc {
      margin-left: 12px;
      font-size: 12px;
      color: #BFBFBF;
    }

    .title-link-btn {
      margin-top: 17px;
      height: 22px;
    }

    .quick-btn-wrap {
      flex-grow: 1;

      .quick-icon {
        font-size: 20px;
        color: #8C8C8C;
      }

      .quick-name {
        margin-left: 4px;
        font-size: 14px;
        color: #8C8C8C;
      }
    }

    .quick-btn + .quick-btn {
      margin-left: 6px;
    }

    .link-wrap {
      margin-left: 12px;
      flex-shrink: 0;
    }
  }

  .ml-30 {
    margin-left: 30px;
  }

  .mt-30 {
    margin-top: 30px;
  }
</style>
